<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .w {
            width: 280px;
            margin: 50px auto;
        }

        .top {
            width: 280px;
            height: 150px;
            background-color: #eee;
        }

        .Time {
            display: block;
            height: 40px;
            line-height: 40px;
            font-size: 24px;
        }

        ul {
            list-style: none;
            width: 280px;
        }

        #demo {
            height: 240px;
            background-color: #e0e262;
        }

        li {
            width: 40px;
            height: 40px;
            line-height: 40px;
            float: left;
            text-align: center;
        }

        .last {
            color: gray;
        }

        .next {
            color: gray;
        }
    </style>
</head>

<body>
    <div class="w">
        <div class="top">
            <span class="Time"></span>
            <span class="YTD"></span>
            <div>
                <span class="last">上</span>
                <span class="yue"></span>
                <span class="next">下</span>
            </div>
            <ul>
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li>六</li>
                <li>七</li>
            </ul>
        </div>
        <ul id="demo"></ul>
    </div>
</body>
<script>
    /* 日历 (1) 封装一个函数 => 传入一个日期对象,返回该月的第一天时星期几?
    (2) 封装一个函数 => 传入一个日期对象,返回上个月有多少天?
    (3) 封装一个函数 => 传入一个日期对象,返回本月有多少天?

    不影响原日期对象(日期对象 => 对象 => 引用类型)

    本月的第0天 就是上个月的最后一天 // 下个月第0天 就是本月的最后一天 */


    function dateFormat(pattern, date) {
        if (date) {
            date = new Date(date);
        } else {
            date = new Date();
        }

        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();

        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();

        return pattern.replace("YY", year).replace("MM", beauty(month)).replace("DD", beauty(day)).replace("hh", beauty(hour)).replace("mm", beauty(minute)).replace("ss", beauty(second));
    }

    function beauty(num) {
        return num < 10 ? "0" + num : num;
    }
    //top 顶部
    var TimeSpan = document.getElementsByClassName("Time")[0];
    var YTDSpan = document.getElementsByClassName("YTD")[0];

    // 输出时间
    nowTime();
    setInterval(function () {
        nowTime();
    }, 100)
    function nowTime() {
        var pattern = dateFormat("hh:mm:ss");
        TimeSpan.innerHTML = pattern;
    }

    //输出日期
    nowYTD();
    setInterval(function () {
        nowYTD();
    }, 1000)
    function nowYTD() {
        var pattern = dateFormat("YY-MM-DD");
        YTDSpan.innerHTML = pattern;
    }

    /*  //传入一个日期对象,返回该月的第一天是星期几?
     function firstWeek(date) {
         if (date) {
             date = new Date(date);//自己设置日期
         } else {
             date = new Date();
         }
         date.setDate(1);
         return date.getDay();
     }
     firstWeek();
     console.log(firstWeek());
     document.write("这个月第一天是星期" + firstWeek() + "<br>")
 
     //(2) 封装一个函数 => 传入一个日期对象,返回上个月有多少天?
     function lastMonth(date) {
         if (date) {
             date = new Date(date);//自己设置日期
         } else {
             date = new Date();
         }
         var month = date.getMonth();
         date.setMonth(month);
         date.setDate(0);
         return date.getDate()
     }
     lastMonth();
     console.log(lastMonth());
     document.write("上个月有" + lastMonth() + "天" + "<br>")
 
     //(3) 封装一个函数 => 传入一个日期对象,返回本月有多少天?
     function thisMonth(date) {
         if (date) {
             date = new Date(date);//自己设置日期
         } else {
             date = new Date();
         }
         date.setDate(1);//先把日期设置成1，避免日期超出
         var month = date.getMonth() + 1;
         date.setMonth(month);
         date.setDate(0);
         return date.getDate();
     }
     thisMonth();
     console.log(thisMonth());
     document.write("这个月有" + thisMonth() + "天")
 
     
     // 日历排布
     var demo = document.getElementById("demo");
     var html = "";
     for(var i = lastMonth() - (firstWeek() - 1) + 1; i <= lastMonth(); i++){
         html += "<li class='last'>" + i + "</li>";
     }
     for(var i = 1; i <= thisMonth(); i++){
         html += "<li>" + i + "</li>";
     }
     for(var i = 1; i <= 42 - thisMonth() - firstWeek() + 1; i++){
         html += "<li class='next'>" + i + "</li>";
     }
     demo.innerHTML = html;
    */



    //日历封装
    clender();//页面加载时先生成一个
    function clender() {
        //传入一个日期对象,返回该月的第一天是星期几?
        function firstWeek(date) {
            if (date) {
                date = new Date(date);//自己设置日期
            } else {
                date = new Date();
            }
            date.setDate(1);
            return date.getDay();
        }
        firstWeek();
        console.log(firstWeek());
        // document.write("这个月第一天是星期" + firstWeek() + "<br>")

        //(2) 封装一个函数 => 传入一个日期对象,返回上个月有多少天?
        function lastMonth(date) {
            if (date) {
                date = new Date(date);//自己设置日期
            } else {
                date = new Date();
            }
            var month = date.getMonth();
            date.setMonth(month);
            date.setDate(0);
            return date.getDate()
        }
        lastMonth();
        console.log(lastMonth());
        // document.write("上个月有" + lastMonth() + "天" + "<br>")

        //(3) 封装一个函数 => 传入一个日期对象,返回本月有多少天?
        function thisMonth(date) {
            if (date) {
                date = new Date(date);//自己设置日期
            } else {
                date = new Date();
            }
            date.setDate(1);//先把日期设置成1，避免日期超出
            var month = date.getMonth() + 1;
            date.setMonth(month);
            date.setDate(0);
            return date.getDate();
        }
        thisMonth();
        console.log(thisMonth());
        // document.write("这个月有" + thisMonth() + "天")


        // 日历排布
        var demo = document.getElementById("demo");
        var html = "";
        for (var i = lastMonth() - (firstWeek() - 1) + 1; i <= lastMonth(); i++) {
            html += "<li class='last'>" + i + "</li>";
        }
        for (var i = 1; i <= thisMonth(); i++) {
            html += "<li>" + i + "</li>";
        }
        for (var i = 1; i <= 42 - thisMonth() - firstWeek() + 1; i++) {
            html += "<li class='next'>" + i + "</li>";
        }
        demo.innerHTML = html;
    }

    //点击功能
    //年月显示
    var lastSpan = document.getElementsByClassName("last")[0];
    var yueSpan = document.getElementsByClassName("yue")[0];
    var nextSpan = document.getElementsByClassName("next")[0];

    yueMonth();
    setInterval(function(){
        yueMonth();
    } , 1000)
    function yueMonth(date) {
        var pattern = dateFormat("YY-MM");
        yueSpan.innerHTML = pattern;
    }

    yueSpan.onclick = function(){

        
    }
</script>

</html>